<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">计划名称</template>{{plan.name}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">详情</template>{{plan.details}}
      </el-descriptions-item>
    </el-descriptions>


    <el-descriptions title="" :column="2" :size="size" border>
      <el-descriptions-item label="计划类型">
        <el-tag type="warning" size="mini" v-if="plan.type === 10">固定任务</el-tag>
        <el-tag type="warning" size="mini" v-else-if="plan.type === 11">固定任务(精确到秒)</el-tag>
        <el-tag type="success" size="mini" v-else-if="plan.type === 20">循环任务(年)</el-tag>
        <el-tag type="success" size="mini" v-else-if="plan.type === 21">循环任务(月)</el-tag>
        <el-tag type="success" size="mini" v-else-if="plan.type === 22">循环任务(天)</el-tag>
        <el-tag type="success" size="mini" v-else-if="plan.type === 23">循循环任务(小时)</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="周期">{{plan.cycle}}</el-descriptions-item>

      <el-descriptions-item label="重要性">
        <el-tag type="danger" size="mini" v-if="plan.importance === 0">核心</el-tag>
        <el-tag type="warning" size="mini" v-else-if="plan.importance === 1">重要紧急</el-tag>
        <el-tag size="mini" v-else-if="plan.importance === 2">不重要但紧急</el-tag>
        <el-tag size="mini" v-else-if="plan.importance === 3">重要但不紧急</el-tag>
        <el-tag type="info" size="mini" v-else >不重要不紧急</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="开始时间">{{plan.startTime}}</el-descriptions-item>
      <el-descriptions-item label="停止时间">{{plan.endTime}}</el-descriptions-item>
      <el-descriptions-item label="最近一次执行">{{plan.executeLastTime}}</el-descriptions-item>

      <el-descriptions-item label="分类">
        <el-tag type="danger" size="mini" v-if="plan.classify === 1">个人</el-tag>
        <el-tag type="warning" size="mini" v-else-if="plan.classify === 2">家庭</el-tag>
        <el-tag size="mini" v-else-if="plan.classify === 3">工作</el-tag>
        <el-tag type="info" size="mini" v-else >-</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="提前提醒时间">{{plan.advance}} 天</el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-alarm-clock"></i>
          录入时间
        </template>
        {{getTime(plan.createTime)}}
      </el-descriptions-item>

    </el-descriptions>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import http from '@/utils/http'
  import {getFullDate, getFullTime} from "../../utils/utils";

  export default {
    name: "PlanDetailed",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 计划
        plan: {

        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 打开页面
       * @param plan 计划
       */
      openPlanDetailedPage(plan){
        this.plan = {}
        this.plan = plan
        this.tableConfig.show = true
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 发行时间转日期
       * @param item 要转换的时间戳
       * @return {string}
       */
      getFullDate(item){
        return getFullDate(item)
      },
    }
  }
</script>

<style scoped>

</style>
